<template>
  <van-nav-bar title="查看设备" left-text="返回" left-arrow @click-left="onClickLeft" />
  <van-tabs v-model:active="active">
    <van-tab title="血压针">
      <dl @click="bia()">
        <dt>
          <img src="../../img/pressa.jpg" alt="" />
        </dt>
        <dd>
          <p>欧姆龙电子血压计U32K</p>
        </dd>
      </dl>
      <dl @click="bia()">
        <dt>
          <img src="../../img/pressa.jpg" alt="" />
        </dt>
        <dd>
          <p>脉搏波血压计RBP-9801</p>
        </dd>
      </dl>
    </van-tab>
    <van-tab title="血糖仪">
      <dl @click="bib()">
        <dt>
          <img src="../../img/2_03.jpg" alt="" />
        </dt>
        <dd>
          <p>三诺亲智血糖仪</p>
        </dd>
      </dl>
      <dl @click="bib()">
        <dt>
          <img src="../../img/2_03.jpg" alt="" />
        </dt>
        <dd>
          <p>乐心智能血糖仪 G2</p>
        </dd>
      </dl>
    </van-tab>
    <van-tab title="手表/手环">
      <dl @click="bic()">
        <dt>
          <img src="../../img/watcha.jpg" alt="" />
        </dt>
        <dd>
          <p>华为手环6</p>
        </dd>
      </dl>
      <dl @click="bic()">
        <dt>
          <img src="../../img/3_03.jpg" alt="" />
        </dt>
        <dd>
          <p>Apple Watch</p>
        </dd>
      </dl>
      <dl @click="bic()">
        <dt>
          <img src="../../img/wachb.jpg" alt="" />
        </dt>
        <dd>
          <p>HUAWEI Health Kit</p>
        </dd>
      </dl>
    </van-tab>
    <van-tab title="运动器械">
      <dl @click="bid()">
        <dt>
          <img src="../../img/bicya.jpg" alt="" />
        </dt>
        <dd>
          <p>健利达动感单车Deepsmove S8 Pro</p>
        </dd>
      </dl>
    </van-tab>
    <van-tab title="体重/体脂秤">
      <dl @click="bie()">
        <dt>
          <img src="../../img/5_03.jpg" alt="" />
        </dt>
        <dd>
          <p>乐心智能体脂秤 A30</p>
        </dd>
      </dl>
      <dl @click="bie()">
        <dt>
          <img src="../../img/5_03.jpg" alt="" />
        </dt>
        <dd>
          <p>乐心智能体脂秤 A32</p>
        </dd>
      </dl>
      <dl @click="bie()">
        <dt>
          <img src="../../img/5_03.jpg" alt="" />
        </dt>
        <dd>
          <p>乐心智能体脂秤 其他型号</p>
        </dd>
      </dl>
    </van-tab>
  </van-tabs>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
// 返回
const onClickLeft = () => {
  router.go(-1)
}
import { ref } from 'vue'
const active = ref('')
//跳转页面
//血压针
const bia = () => {
  router.push({ path: '/bia' })
}
//血糖仪
const bib = () => {
  router.push({ path: '/bib' })
}
//手表/手环
const bic = () => {
  router.push({ path: '/bic' })
}
//运动器械
const bid = () => {
  router.push({ path: '/bid' })
}
//体重/体脂秤
const bie = () => {
  router.push({ path: '/bie' })
}
</script>
<style>
.van-tabs__content {
  padding: 0;
}
.van-tab__pane {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.van-tab__pane dl {
  display: flex;
}
.van-tab__pane dt {
  width: 100px;
}
.van-tab__pane dd {
  display: flex;
  flex-direction: column;
  align-items: center;
}
dl {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  width: 100%;
  height: 150px;
  background-color: #fff;
  padding: 25px;
  margin-bottom: 10px;
  margin-bottom: 3px;
  margin-top: 3px;
}
dl dt {
  float: left;
  width: 30%;
  height: 100%;
  img {
    width: 100%;
  }
}
dl dd {
  display: flex;
  flex-direction: column;
  align-items: center;
  float: right;
  width: 70%;
  height: 100%;
  line-height: 20px;
  align-items: flex-start;
  margin-left: 20px;
  p {
    margin: 0;
    padding: 0;
  }
}
</style>
